﻿<%@ Page Language="C#" MasterPageFile="FrontEnd.Master" AutoEventWireup="true" CodeBehind="DesktopBuilder.aspx.cs" Inherits="MonkeyShop.Web.DesktopBuilder" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server" >
    <script src="/Scripts/desktopbuilder.js"></script>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
        <div style="width:200px; float: right;">
            <p>Tổng cộng: <span data-bind="text: formatCurrency(totalAmount())"></span></p>
            <button data-bind="click: proceed">Đã chọn xong</button>
        </div>
        <div style="width: 800px;">
            <table style="width: 100%;">
                <tr><td colspan="3" class="conf_middle">1. Chọn cấu hình chính</td></tr>
                <tr><td class="td_left"><img alt="CPU" src="images/cat/1.gif" /></td><td><div>Bộ vi xử lý (CPU)</div><select data-bind="options: cpus, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().cpuId"></select></td><td><img alt="CPU" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="Mainboard" src="images/cat/73.gif" /></td><td><div>Mainboards</div><select data-bind="options: mainboards, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().mainboardId"></select></td><td><img alt="Mainboard" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="RAM" src="images/cat/2.gif" /></td><td><div>RAM</div><select data-bind="options: rams, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().ramId"></select></td><td><img alt="RAM" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="VGA" src="images/cat/11.gif" /></td><td><div>Card màn hình (VGA)</div><select data-bind="options: vgas, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().vgaId"></select></td><td><img alt="VGA" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="Power" src="images/cat/19.gif" /></td><td><div>Nguồn (Power)</div><select data-bind="options: powers, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().powerId"></select></td><td><img alt="Power" src="images/button_help_on.png" /></td></tr>
            </table>
            <table style="width: 100%;">
                <tr><td colspan="3" class="conf_middle">2. Chọn Ổ cứng, CD/DVD/BLU-RAY</td></tr>
                <tr><td class="td_left"><img alt="HDD" src="images/cat/5.gif" /></td><td><div>Ổ cứng (HDD)</div><select data-bind="options: hdds, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().hddId"></select></td><td><img alt="HDD" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="HDD" src="images/cat/5.gif" /></td><td><div>Ổ cứng 2 (HDD)</div><select data-bind="options: hdd2s, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().hdd2Id"></select></td><td><img alt="HDD" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="CD/DVD/BLU_RAY" src="images/cat/8.gif" /></td><td><div>Ổ đĩa quang (CD/DVD/BLU_RAY)</div><select data-bind="options: cds, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().cdId"></select></td><td><img alt="CD/DVD/BLU_RAY" src="images/button_help_on.png" /></td></tr>
            </table>
            <table style="width: 100%;">
                <tr><td colspan="3" class="conf_middle">3. Chọn Case, Màn hình (Monitor), Bàn phím (Keyboard), Chuột (Mouse)</td></tr>
                <tr><td class="td_left"><img alt="Case" src="images/cat/ha.jpg" /></td><td><div>Case</div><select data-bind="options: cases, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().caseId"></select></td><td><img alt="Case" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="Monitor" src="images/cat/22.gif" /></td><td><div>Màn hình (Monitor)</div><select data-bind="options: monitors, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().monitorId"></select></td><td><img alt="Monitor" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="Keyboard" src="images/cat/23.gif" /></td><td><div>Bàn phím (Keyboard)</div><select data-bind="options: keyboards, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().keyboardId"></select></td><td><img alt="Keyboard" src="images/button_help_on.png" /></td></tr>
                <tr><td><img alt="Mouse" src="images/cat/24.gif" /></td><td><div>Chuột (Mouse)</div><select data-bind="options: mouses, optionsValue: 'Id', optionsText: 'NamePrice', value: selectedModel().mouseId"></select></td><td><img alt="Mouse" src="images/button_help_on.png" /></td></tr>
            </table>
            <table style="width: 100%;">
                <tr><td><button data-bind="click: proceed">Đã chọn xong</button></td></tr>
            </table>
        </div>

    <script type="text/javascript">
        var desktopBuilderModel = new DesktopBuilderModel();
        $(function () {
            $(document).ajaxStop($.unblockUI);
            ko.applyBindings(desktopBuilderModel);
            // reload selected products from cookie
            //var savedDesktopModel = $.cookie("desktop-model");
            //if (savedDesktopModel)
            //    self.selectedModel(ko.mapping.fromJS(JSON.parse(savedDesktopModel)));
            //alert(desktopBuilderModel);
            //desktopBuilderModel.selectedModel().cpuId(5);
        });
    </script>
</asp:Content>